<template>
	<view>
		<view class="form_main">
			<view class="form_item">
				<view class="title">*姓名</view>
				<input class="input input_view" type="text" v-model="dataForm.name" />
			</view>
			<view class="form_item">
				<view class="title">*电话</view>
				<input class="input input_view" type="number" v-model="dataForm.phone" />
			</view>
			<view class="form_item">
				<view class="title">*公司名称</view>
				<input class="input input_view" v-model="dataForm.company" />
			</view>
			<view class="form_item">
				<view class="title">*职务</view>
				<input class="input input_view" v-model="dataForm.job" />
			</view>
			<view class="form_item" v-if="restaurant">
				<view class="title">是否就餐</view>
				<radio-item v-model="dataForm.is_restaurant" :options="isRestOption"></radio-item>
			</view>
			<view class="pay_box">
				<view class="title">参与人数</view>
				<u-number-box :min="1" v-model="dataForm.num"></u-number-box>
			</view>
			<view class="form_item">
				<view class="title">备注</view>
				<textarea class="input input_textarea" type="textarea" v-model="dataForm.remarks" />
			</view>
		</view>
		<view class="glo_bot_main">
			<view class="glo_bot_fix">
				<view class="glo_button" @click="startSubmit" :style="{ background: vuex_config.themeColor1 }">
					立即报名
					<template v-if="price > 0">
						<text class="sign">￥</text>
						<text>{{ (price * dataForm.num).toFixed(2) }}</text>
					</template>
				</view>
			</view>
		</view>
		<sww-pay-class ref="payCheck" @callBack="onPayPrice"></sww-pay-class>
	</view>
</template>

<script>
import radioItem from './radioItem.vue';
import { isMobile } from '@/utils/validate.js';
import { payOrder } from '@/mixins/payOrder.js';
export default {
	mixins: [payOrder],
	props: {
		meetId: {
			type: Number,
			default: 0
		},
		price: {
			type: Number,
			default: 0
		},
		restaurant:{
			type:Boolean,
			default:false
		},// 是否可以选择就餐
	},
	components: {
		'radio-item': radioItem
	},
	data() {
		return {
			dataForm: {
				meeting_info_id: null,
				name: '',
				phone: '',
				company:'',
				job:'',
				is_restaurant: 0,
				num: 1,
				remarks: ''
			},
			isRestOption: [
				{
					name: '就餐',
					value: 1
				},
				{
					name: '不就餐',
					value: 0
				}
			]
		};
	},

	mounted() {},

	methods: {
		startSubmit() {
			this.judge().then(() => {
				if (this.price > 0) {
					this.$refs.payCheck.open(this.price * this.dataForm.num);
				} else {
					this.$loading()
					this.addMeetUser().then(()=>{
						this.$hide()
						this.$toast({ title: '报名成功', icon: 'success' });
						setTimeout(() => {
							this.$emit('subFinsh');
						}, 1000);
					})
				}
			});
		},
		judge() {
			return new Promise((resolve, reject) => {
				if (!this.dataForm.name) {
					this.$toast({ title: '请填写用户姓名' });
					reject();
				} else if (!this.dataForm.phone || !isMobile(this.dataForm.phone)) {
					this.$toast({ title: '请填写正确的电话' });
					reject();
				} else if (!this.dataForm.company) {
					this.$toast({ title: '请填写公司名称' });
					reject();
				} else {
					resolve();
				}
			});
		},
		addMeetUser() {
			return new Promise((resolve, reject) => {
				this.$resPost('AddMeetingUsersInfo', { ...this.dataForm, meeting_info_id: this.meetId })
					.then(({ data }) => {
						resolve(data);
					})
					.catch(() => {
						reject();
					});
			});
		},
		// 确定支付
		onPayPrice(e) {
			let pay_type = e.pay_type
			// 报名
			this.addMeetUser().then(valId => {
				let params = {
					business_appid: this.vuex_business.appid,
					total_amount: (this.price * this.dataForm.num).toFixed(2),
					remark: '会议报名订单'
				};
				let options = {
					orderApi: 'AddOrderMeeting',
					redirectUrl: '',
					totalPrice: params.total_amount,
					pay_type: pay_type,
					order_type: 15,
					remark: '会议报名订单'
				};
				let json_detailed = [
					{
						fk_meeting_users_id: valId,
						price: this.price,
						num: this.dataForm.num,
						remark: '会议报名订单'
					}
				];
				this._submitOrder({}, { modal: false, createAble: false }).then(dataOption => {
					// 生成订单并支付
					this.createOrder({ ...params, json_detailed: JSON.stringify(json_detailed) }, { ...dataOption, ...options })
						.then(() => {
							this.$toast({ title: '报名成功', icon: 'success' });
							setTimeout(() => {
								this.$emit('subFinsh');
							}, 1000);
						})
						.catch(() => {
							setTimeout(() => {
								this.$emit('subFinsh');
							}, 800);
						});
				});
			});
		}
	}
};
</script>

<style scoped lang="scss">
.form_main {
	padding: 0 24rpx 1rpx;
	background-color: #fff;
	.title {
		font-weight: bold;
		padding: 30rpx 0;
	}
	.form_item {
		padding-bottom: 10rpx;
		.title {
			padding: 30rpx 0;
		}
		.input {
			border: 1px solid #dde5ed;
			border-radius: 6rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			&.input_view {
				line-height: 68rpx;
				height: 68rpx;
			}
			&.input_textarea {
				width: 100%;
				padding: 10rpx 20rpx;
				line-height: 42rpx;
				height: 168rpx;
			}
		}
	}
	.pay_box {
		padding-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.sign {
	font-size: 26rpx;
}
</style>
